import React from "react";
import {Button, List, Card, Modal} from 'antd/lib';
import TimeSerial from "@/services/timeSerial";
import notification from "@/services/notification";
import navigateTo from "@/components/ApplicationArea/navigateTo";
import TimeSerialDialog from "@/components/timeserial/TimeSerialDialog";
import AppleOutlined from "@ant-design/icons/AppleOutlined";
const ButtonGroup = Button.Group;

export default class TimeSerialCard extends React.Component {

  state = {
      items: [],
      //   {
      //     id: 1,
      //     num: "1",
      //     calendar_enum: "nature",
      //     timestruct_id: "1",
      //     parent_id: "1",
      //     begin_date: "2020-1-1",
      //     close_date: "2020-1-31",
      //     timeserialstatus_enum: "Draft",
      //   },
      // ]
      loading: true,
  };

  cardClick = (item) => {
    //let next_id = 0;
        // let node = breaditems.items.filter((p) => {
    //   return p.id === this.state.timestruct_id;
    // });
  //  this.itemsadd(id, this.props.timestruct_id)
        TimeSerial.query(item.id,item.timestruct_id).then(data => {
      this.setState({
        items: data,
      });
    });
    // let node = breaditems.items.filter((p) => {
    //   return p.id === this.state.timestruct_id;
    // });
    // let nodes = node["nodes"];
    // if (!nodes) next_id = nodes[0].id;
    //
    // if (!next_id) return;     //程序异常
    //
    // this.setState({
    //   timestruct_id: next_id,
    //   parent_id: id,
    // });
  };

  deleteNode = (event, timeSerial) => {
    Modal.confirm({
      title: "删除时间系列节点",
      content: "确定要删除时间系列节点吗?",
      okText: "确定",
      okType: "danger",
      cancelText: "取消",
      onOk: () => {
        TimeSerial.delete(timeSerial)
          .then(() => {
            notification.success("删除成功.");
            TimeSerial.query(this.props.parent_id, this.props.timestruct_id).then(data => {
              this.setState({
                items: data,
                loading: false,
              });
            });
          })
          .catch(() => {
            notification.error("删除失败.");
          });
      },
    });
  };

  showNodeDialog = (timeSerial) => {
  TimeSerialDialog.showModal({timeserial_item: timeSerial})
    .onClose((result = {}) => {
      if (result.success) {
        TimeSerial.query(this.props.parent_id, this.props.timestruct_id).then(data => {
          this.setState({
            items: data,
            loading: false,
          });
        });
      }
    })
    .onDismiss(() => {
      navigateTo("timeserial", true);
    });
};
    componentWillMount() {
    TimeSerial.query(this.props.parent_id, this.props.timestruct_id).then(data => {
      this.setState({
        items: data,
        loading: false,
      });
    });
  }
    // 这种方式十分适合父子组件的互动，通常是父组件需要通过某些状态控制子组件渲染亦或销毁...
componentWillReceiveProps(nextProps) {//componentWillReceiveProps方法中第一个参数代表即将传入的新的Props
  this.setState({ loading: true });
  TimeSerial.query(nextProps.parent_id, nextProps.timestruct_id).then(data => {
    this.setState({
      items: data,
      loading: false,
    });
  });
  //20200328时间序列树测试
  // let timeserialstatus_enums="nature"
  //  TimeSerial.gettree(timeserialstatus_enums).then(data => {
  //     console.log('data',data);
  //  });
}
  renderCard()
  {
    return (
      <div className="table-responsive">
        <List
          grid={{
            gutter: 16,
            xs: 1,
            sm: 2,
            md: 4,
            lg: 4,
            xl: 6,
            xxl: 3,
          }}
          dataSource={this.state.items}
          renderItem={item => (
            <List.Item>
              <Card title={item.num} extra={<AppleOutlined />}>
                <a >名称：{item.name}</a><br/>
                <a className="clickable" onClick={ ()=> this.props.clickname(item) }>
                开始：{item.begin_date}<br/>结束：{item.close_date}
                </a>
                <ButtonGroup>
                  <Button type="primary" size="small" icon="edit" onClick={() => this.showNodeDialog(item)}/>
                  <Button type="primary" size="small" icon="delete" onClick={e => this.deleteNode(e, item)}/>
                </ButtonGroup>
              </Card>
            </List.Item>
          )}
        />
      </div>
    );
  };


  render() {
    if (this.state.loading) return null;
   // this.itemsadd(this.props.parent_id, this.props.timestruct_id);
    return(
      this.renderCard()
    );
  }
}

